<template>
	<view class="content">
		<!-- #ifdef MP-WEIXIN -->
		<scroll-view :scroll-x="true" :enable-flex="true" class="scroll">
			<view class="mr-[20rpx] last:mr-0 item" v-for="item in list" :key="item.goodId" @click="goodsClick(item)">
				<up-image :src="$setBaseUrl(item.pic)" width="136rpx" height="136rpx"></up-image>
				<view class="text-[22rpx] mt-[8rpx]">{{ item.name }}</view>
			</view>
			<view class="invisible">
				<view class="placeholder"></view>
			</view>
		</scroll-view>
		<!-- #endif -->
		<!-- #ifndef MP-WEIXIN -->
		<view class="scroll">
			<view class="mr-[20rpx] last:mr-0 item" v-for="item in list" :key="item.goodId" @click="goodsClick(item)">
				<up-image :src="$setBaseUrl(item.pic)" width="136rpx" height="136rpx"></up-image>
				<view class="text-[22rpx] mt-[8rpx]">{{ item.name }}</view>
			</view>
			<view class="invisible">
				<view class="placeholder"></view>
			</view>
		</view>
		<!-- #endif -->
		<view class="mask">
			<view class="text-[#FF4D1B] font-bold">￥{{ total }}</view>
			<view class="">共 {{ number }} 件</view>
		</view>
	</view>
</template>

<script setup>
import { computed } from 'vue';

const emit = defineEmits(['goodsClick']);
const props = defineProps({
	list: {
		type: Array,
		default: () => []
	}
});
const total = computed(() => {
	return props.list
		.reduce((pre, cur) => {
			return pre + (cur.price - cur.groupDiscount) * Number(cur.num);
		}, 0)
		.toFixed(2);
});
const number = computed(() => {
	return props.list.reduce((pre, cur) => {
		return pre + Number(cur.num);
	}, 0);
});
const goodsClick = (item) => {
	emit('goodsClick', item);
};
</script>

<style lang="scss" scoped>
.content {
	@apply relative;
}
.scroll {
	@apply flex max-w-full overflow-auto p-[30rpx] h-[234rpx] bg-white  rounded-[8rpx];
}
.item {
	@apply basis-[136rpx];
}
.mask {
	@apply text-center text-[28rpx] h-full w-[166rpx] flex flex-col items-center justify-center absolute right-0 top-0 bg-gradient-to-r from-[rgba(255,255,255,0.92)] to-[#fff];
}
.placeholder {
	@apply w-[136rpx];
}
</style>
